<template>
    <div id="types-main">
        <h3>保险分类列表</h3>
        <div class="type-btn">
            <div class="search">
                <el-input
                class="seacrchInput"
                    placeholder="请输入搜索内容"
                    v-model.lazy="searchInput"
                    clearable
                >
                </el-input>
            </div>
            <div id="dialog">
                <el-button type="success" @click="addDialog = true"
                    >新增分类</el-button
                >
            </div>
        </div>
        <el-table :data="typeArr" border stripe style="width: 100%">
            <el-table-column prop="_id" label="保险分类编号"> </el-table-column>
            <el-table-column prop="name" label="保险分类名称">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="updateDialogFun(scope.row._id)"
                        >编辑</el-button
                    >
                    <el-button
                        size="mini"
                        type="danger"
                        @click="open(scope.row._id)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <!-- 弹窗区 -->
        <el-dialog title="新增分类" :visible.sync="addDialog" width="30%">
            <el-form
                label-width="120px"
                @submit.native.prevent
                label-position="right"
            >
                <el-form-item label="分类名称：">
                    <el-input
                        class="inputText"
                        placeholder="请输入分类名称"
                        v-model="addTypesName"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" @click="addTypeFun"
                        >确定新增</el-button
                    >
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="修改分类" :visible.sync="updateDialog" width="30%">
            <el-form
                label-width="120px"
                @submit.native.prevent
                label-position="right"
            >
                <el-form-item label="分类名称：">
                    <el-input
                        class="inputText"
                        v-model="updateType.name"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" @click="updateTypeFun"
                        >确定修改</el-button
                    >
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers("types");
export default {
    created() {
        this.getTypes();
    },
    data() {
        return {
            addTypesName: "",
            updateTypesName: "",
            addDialog: false,
            updateDialog: false,
            tableData: [],
        };
    },
    computed: {
        ...mapState([
            "typeArr",
            "updateType",
        ]),
        searchInput: {
            get() {
                return this.$store.state.types.searchInput;
            },
            set(val) {
                this.changeSearch(val);
                this.getTypes();
            },
        },
    },
    methods: {
        ...mapMutations([
            "changeSearch",
        ]),
        ...mapActions([
            "addTypes",
            "getTypes",
            "getTypesById",
            "modifyTypes",
            "delTypes",
        ]),
        //确认新增
        async addTypeFun() {
            //关闭弹窗
            this.addDialog = false;
            //发送新增请求
            const { data } = await this.addTypes({ name: this.addTypesName });
            if (data.status) {
                this.$message({
                    type: "success",
                    message: "保险分类新增成功",
                });
                this.getTypes();
            } else {
                this.$message({
                    type: "info",
                    message: "保险分类新增失败",
                });
            }
            //清空新增input
            this.addTypesName = "";
        },
        //修改弹窗
        updateDialogFun(_id) {
            this.updateDialog = true;
            this.getTypesById({ _id });
        },
        //确定修改
        async updateTypeFun() {
            this.updateDialog = false;
            const data = await this.modifyTypes(this.updateType);
            if (data.status) {
                this.$message({
                    type: "success",
                    message: "保险分类修改成功",
                });
                this.getTypes();
            } else {
                this.$message({
                    type: "info",
                    message: "保险分类修改失败",
                });
            }
        },
        //删除提示框
        open(_id) {
            this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const { data } = await this.delTypes({ _id });
                    if (data.status) {
                        this.$message({
                            type: "success",
                            message: data.message
                        });
                        this.getTypes();
                    } else {
                        this.$message({
                            type: "info",
                            message: data.message
                        });
                    }
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
    },
    watch: {
        //监听 当前页
        currentPage() {
            this.getTypes();
        },
        //监听 每页显示条数
        pageSize() {
            this.getTypes();
        },
    },
};
</script>

<style lang='scss'>
@import '~@/css/type.scss'
</style>